<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form layout="vertical" class="rx-a-form-vertical">
                    <a-form-item :label="i18n('form.backgroundType','背景类型')">
                        <a-radio-group v-model="mdl.attribute">
                            <a-radio v-for="obj in backgroundType" :value="obj.value">
                                {{ obj.label }}
                            </a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item  :label="i18n('form.backgroundColor','背景颜色')">
                        <div class="user-back" v-if="mdl.attribute=='system'">
                            <div v-for="(item,index) in backgroundList" :key="index"
                                 :style="{'background':item}"
                                 @click="backgroundClick(item)" class="user-back-common">
                                <my-icon v-if="mdl.background==item" type="icondui"></my-icon>
                            </div>
                        </div>
                        <div v-else>
                            <a-input style="width: 150px" v-model="mdl.background" type="color"/>
                        </div>
                    </a-form-item>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import {RxDialog,RxLayout,Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "myColor",
    components:{
        RxLayout,
        RxDialog
    },
    props: ["layerid", "destroy","backColor"],
    data(){
        return{
            mdl:{
                attribute:'',
                background:'',
            },
            backgroundType: [{
                value: 'system',
                label: this.i18n('form.system', '系统'),
            }, {
                value: 'custom',
                label: this.i18n('form.custom', '自定义')
            }],
            backgroundList: ['#1890FF', '#4285F4', '#2A48FF', '#01DE96', '#0FC6C2', '#7BC616', '#00B42A', '#EB0AA4', '#B71DE8', '#7816FF', '#FFB400', '#FF7D00', '#FF794F', '#F53F3F'],
        }
    },
    created(){
        if(this.backColor){
            this.mdl.background = this.backColor;
            for (let key in this.backgroundList){
                if(this.backgroundList[key]==this.backColor){
                    this.mdl.attribute = "system"
                }
            }
            if(!this.mdl.attribute){
                this.mdl.attribute = "custom"
            }
        }

    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        backgroundClick(e) {
            this.mdl.background = e;
        },
        handOk(){
            Util.closeWindow(this, "ok",this.mdl.background);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
    }
}
</script>
<style scoped>
.user-back {
    display: flex;
    width: 100%;
    cursor: pointer;
}

.user-back-common i {
    color: white;
}

.user-back-common {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 31px;
}
.user-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #4285F4;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 26px;
}
</style>